<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="200px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="服务名称">
              <el-input v-model="form.service_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户名称">
              <el-input v-model="form.shop_name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态">
              <el-select v-model="form.check_status" clearable>
                <el-option
                  v-for="item in examineList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经销商小程序分享频道展示">
              <el-select v-model="form.is_jxsapp_show" placeholder="请选择">
                <el-option
                  v-for="(item,index) in showList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="plus频道页展示">
              <el-select v-model="form.is_plus_top" placeholder="请选择">
                <el-option
                  v-for="(item,index) in plusList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="3">
            <el-button type="primary" @click="searchList()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="编号" width="80px" align="center" />
        <el-table-column prop="service_name" label="服务名称" align="center" />
        <el-table-column prop="price" label="服务售价" align="center" />
        <el-table-column prop="shop" label="商户名称" align="center">
          <template slot-scope="scope">{{ scope.row.shop.name }}</template>
        </el-table-column>
        <el-table-column prop="check_time" label="提交时间" align="center" />
        <el-table-column prop="check_status_time" label="审核时间" align="center" />
        <el-table-column prop="check_status_name" label="状态" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.check_status_name }}</span>
            <div>
              <el-button
                v-if="scope.row.check_status==2"
                type="text"
                @click="handleReason(scope.row.check_msg)"
              >驳回原因</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="is_plus_top" label="plus频道页展示" align="center">
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.check_status == 3 && scope.row.status == 1"
              v-model="scope.row.is_plus_top"
              :active-value="1"
              :inactive-value="0"
              @change="plusSwitch(scope.row.id,scope.row.is_plus_top)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="is_jxsapp_show" label="经销商小程序分享频道展示" align="center" width="190px">
          <template slot-scope="scope">
            <el-switch
              v-if="scope.row.check_status == 3 && scope.row.status == 1"
              v-model="scope.row.is_jxsapp_show"
              :active-value="1"
              :inactive-value="0"
              @change="changeSwitch(scope.row.id,scope.row.is_jxsapp_show)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <!-- 查看按钮 -->
            <el-button type="text" size="mini" @click="toRoutes('serveInfo',scope.row.id)">查看</el-button>
            <!-- 审核按钮 -->
            <el-button
              v-if="scope.row.check_status == 1"
              type="text"
              size="mini"
              @click="changeStatus(scope.row.id)"
            >审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

      <el-dialog title="审核" :visible.sync="centerDialogVisible" width="468px" @close="closeDialog">
        <el-form ref="checkForm" :model="checkForm" :rules="checkRules" label-width="100px">
          <el-form-item label="审核" prop="check_status">
            <el-radio-group v-model="checkForm.check_status">
              <el-radio label="3">通过</el-radio>
              <el-radio label="2">不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="checkForm.check_status == 2" label="驳回原因" prop="check_msg">
            <el-input
              v-model="checkForm.check_msg"
              placeholder="最多100个字符，超过字数限制不继续可输入"
              maxlength="100"
              clearable
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveFn('checkForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  auditList,
  auditCheck,
  swithChange,
  plusChange,
} from "@/api/servemange";
export default {
  filters: {
    // 审核状态过滤
    examineType(e) {
      switch (e) {
        case 1:
          return "审核中";
          break;
        case 2:
          return "审核未通过";
          break;
        case 3:
          return "审核通过";
          break;
        default:
          return "暂无";
          break;
      }
    },
    // 上架状态过滤
    statusType(e) {
      switch (e) {
        case 0:
          return "已下架";
          break;
        case 1:
          return "已上架";
          break;
        default:
          return "暂无";
          break;
      }
    },
  },
  data() {
    return {
      // status 0 下架 1 上架
      // loading层
      tableLoading: false,
      // 弹窗默认状态
      centerDialogVisible: false,
      // tabs数据 默认展示全部
      activeName: "1",
      tabList: [
        { label: "全部", name: "1" },
        { label: "待审核", name: "2" },
        { label: "审核通过", name: "3" },
        { label: "审核不通过", name: "4" },
      ],
      showList: [
        { name: "全部", value: "" },
        { name: "是", value: 1 },
        { name: "否", value: 0 },
      ],
      plusList: [
        { name: "全部", value: "" },
        { name: "是", value: 1 },
        { name: "否", value: 0 },
      ],
      tabCheck: [],
      imgUrl: "http://mmkappnew.oss-cn-beijing.aliyuncs.com/",

      // 提交form
      form: {
        page: 1,
        page_size: 10,
        shop_name: "",
        service_name: "",
        check_status: "",
        is_jxsapp_show: "", //经销商展示
        is_plus_top: "", //plus展示
      },
      // 审核状态下拉列表
      examineList: [
        {
          name: "待审核",
          value: "1",
        },
        {
          name: "审核未通过",
          value: "2",
        },
        {
          name: "审核通过",
          value: "3",
        },
      ],

      // 主页列表显示
      tableData: [],
      // 弹窗规则验证
      checkRules: {
        check_status: [
          {
            required: true,
            message: "请选择审核状态",
            trigger: "blur",
          },
        ],
        check_msg: [
          {
            required: true,
            message: "请输入驳回原因",
            trigger: "blur",
          },
          {
            min: 3,
            max: 100,
            message: "长度在 3 到 100 个字符",
            trigger: "blur",
          },
        ],
      },
      // 驳回原因信息
      checkForm: {
        id: "",
        check_status: "",
        check_msg: "",
      },
      // 弹窗选项信息
      AuditForm: {},
      // 分页
      page_sizes: [10, 30, 50, 100],
      page_totals: 60,
    };
  },
  mounted() {
    this.getList(this.form);
  },
  // inject: ["reload"],
  methods: {
    // 获取列表
    getList(e) {
      this.tableLoading = true;
      auditList(e)
        .then((res) => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.data;
            this.page_totals = res.data.data.total;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
          this.tableLoading = false;
        })
        .catch((err) => {
          this.errorStatus(err.msg);
          this.tableLoading = false;
        });
    },
    // plus展示开关
    plusSwitch(id, status) {
      let datas = {
        id,
        status,
      };
      plusChange(datas)
        .then((res) => {
          if (res.data.code == 200) {
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          // console.log("err", err);
          this.errorStatus(err.msg);
        });
    },
    // switch开关
    changeSwitch(id, opt) {
      const datas = { id, opt };
      swithChange(datas)
        .then((res) => {
          if (res.data.code == 200) {
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          // console.log("err", err);
          this.errorStatus(err.msg);
        });
    },
    // 驳回信息
    handleReason(msg) {
      this.$confirm(msg, "驳回理由", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // this.$message({
          //     type: "success",
          //     message: "删除成功!"
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 搜索
    searchList() {
      this.form.page = 1;
      this.getList(this.form);
    },
    changeStatus(id) {
      this.centerDialogVisible = true;
      this.checkForm.id = id;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 监听对话框关闭事件
    closeDialog() {
      this.checkForm = {
        check_msg: "",
        check_status: "",
        id: "",
      };
    },
    // 确认按钮
    saveFn(e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          auditCheck(this.checkForm).then((res) => {
            if (res.data.code == 200) {
              this.centerDialogVisible = false;
              this.getList(this.form);
              this.$message({
                message: "操作成功",
                type: "success",
              });
            } else {
              this.eleMsg(res.data.msg, "error");
            }
          });
        } else {
          this.$message({
            message: "有必填项没填，不能提交咯",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    // 警告状态弹窗
    warningStatus(txt) {
      this.eleMsg(txt, "warning");
    },
    // 路由跳转
    toRoutes(e, Id) {
      const route = { name: e, query: { id: Id } };
      this.$router.push(route);
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.page_size = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // 取消弹窗
    cancel() {
      this.dialogFormVisible = false;
      this.$message("已取消");
    },
    // confirm框
    eleConfirm(e) {
      this.$confirm(e.desc, e.title, {
        confirmButtonText: e.confirmBtnTxt,
        cancelButtonText: e.cancelBtnTxt,
        type: "warning",
      })
        .then(() => {
          e.fn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: e.catchInfo,
          });
        });
    },
  },
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
/* .el-range-editor--medium.el-input__inner {
  width: 236px;
} */
.switchBtn {
  color: #ff4949;
}
.alignRight {
  text-align: right;
}
</style>























